<template>
  <div style="margin: auto;margin-top: -55px">
    <div style="height: 45px;background-color: #02A774;margin-top: 0px">
      <div v-if="showName" style="float:right">
        <router-link to="/myregister" style="margin-top: 15px">注册</router-link>|
        <router-link to="/mylogin">登录</router-link>
      </div>
      <div v-else style="float:right;margin-right:10px;margin-top:5px">
        <font color="red">欢迎你:{{tok}}</font>
      </div>
    </div>
    <div style="height: 240px">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 3" :key="item" style="height: 240px">
          <div style="height: 80px;margin-top: 5px">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
            </el-row>
          </div>
          <div style="height: 80px">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
            </el-row>
          </div>
          <div style="height: 80px">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div style="float: left">
                  <img src="../assets/33.png" style="width: 40px;height: 40px;margin-left: 30px">
                </div>
                <div style="clear: left"></div>
                <div>
                  <router-link to="/waimai">外卖</router-link>
                </div>
              </div></el-col>
            </el-row>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <p v-for="(lm,i) in listMerchant" @click="merchant(lm)">
      <el-container style="background-color: red;height: 130px">
        <el-aside  style="background-color: #66B1FF;height: 100%;width:35% ">
          <el-image :src="lm.m_image" style="width: 80%;height:70%;margin-top: 15px"></el-image>
        </el-aside>
        <el-main style="background-color: #02A774;height: 100%;width: 65%">
          <el-row style="width: 100%;height: 50%;background-color: cadetblue;margin-top: -5px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">{{lm.m_name}}</div></el-col>
          </el-row >
          <el-row style="width: 100%;height:30%;background-color: goldenrod;margin-top: -5px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <i class="el-icon-star-on" style="color: red"><font size="2px">{{lm.m_score}}</font></i>&nbsp&nbsp&nbsp<font size="2px">月售{{lm.m_sale}}</font>
            </div></el-col>
          </el-row>
          <el-row  style="width: 100%;height: 10%;background-color: darkgray;margin-top: -5px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <font size="2px"> 配送费<font color="red">￥</font>&nbsp{{lm.m_deliveryprice}}&nbsp&nbsp 距离&nbsp&nbsp{{lm.m_instance}}&nbspkm</font>
            </div></el-col>
          </el-row>
        </el-main>
      </el-container>
    </p>

    <div style="height: 70px;background-color: #f9fafc"  class="fixed">
      <div style="float: left;width: 33%">
        <div>
          <el-button type="primary" icon="el-icon-platform-eleme" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          外卖
        </div>
      </div>
      <!--<div style="float: left;width: 25%" @click="mySolr()">
        <div>
          <el-button  type="primary" icon="el-icon-search" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          搜索
        </div>
      </div>-->
      <div style="float: left;width: 33%" @click="myOrder()">
        <div>
          <el-button  type="primary" icon="el-icon-s-order" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          订单
        </div>
      </div>
      <div style="float: left;width: 33%" @click="my()">
        <div>
          <el-button  type="primary" icon="el-icon-s-custom" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          我的
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data(){
      return{
        tok: '',
        showName :false,
        tableData: [{
          f_id: "",
          f_name: "",
          f_image: "",
          mc_id: ""
        }
        ],
        listMerchant: [
          {
            m_id:"",
            m_name:"",
            m_sale:"",
            m_deliveryprice:"",
            m_image:"",
            m_instance:"",
            m_score:"",
          }
        ],
        item: "index",
      }
    },
    methods: {
      mySolr(){
        this.$router.push({name: "solr"});
      },
      myOrder(){
        this.$router.push({name: "order"});
      },
      my(){
        this.$router.push({name: "my"});
      },
      merchant(obj){
        const vm = this;
        vm.$router.push({name:"merchant",params:{m_id: obj.m_id}});
      },
      /* selAll(){
         var _this = this;
         axios.get("/waimai/FunctionController/selAll").then(function (res) {
           _this.tableData = res.data;
         })
       },*/
      selAllMerchant(){
        var _this = this;
        axios.get("/waimai/MerchantController/selAllMerchant").then(function (res) {
          _this.listMerchant = res.data;
        })
      }
    },
    mounted(){
      // this.selAll();
      this.selAllMerchant();
      this.tok = this.$session.get("u_name");
      if(this.tok==undefined){
        this.showName = true;
      }
    }
  }
</script>

<style>
  /*.el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
    height: 80px;
  }*/
  /*将div固定底部  css*/
  .fixed{ position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:#000;
    z-index:9999;
  }
  /* 添加班课样式 */
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    /*height: 70px;*/
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 240px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .el-carousel__container {
    position: relative;
    height: 240px;
  }
</style>
